<template>
  <label
    :class="[prefixCls,
    isDisabled?'vbestui-checkbox-disabled':'',
  isDisabled?((isBorder||isButton)?'vbestui-checkbox-border-disabled':''):'',
  (isBorder||isButton)?(isCheck?'vbestui-checkbox-border-action':'vbestui-checkbox-border'):'']"
  >
  <!-- checkbox选择框 -->
    <span
      class="vbestui-checkbox-check"
      v-if="!isButton"
      :class="[isCheck?(isDisabled?'vbestui-checkbox-check-action-disabled':'vbestui-checkbox-check-action'):'']"
    >
    <!-- 选择框图标 -->
      <i class="vbestui-iconfont icon-dui vbestui-checkbox-icon" v-if="isCheck"></i>
    </span>
    <span class="vbestui-checkbox-label">
      <slot>{{label}}</slot>
    </span>
    <input
      type="checkbox"
      :name="name"
      :value="label"
      v-model="model"
      :disabled="isDisabled"
      class="vbestui-checkbox-input"
      @change="handleChange"
    />
  </label>
</template>
<script>
const prefixCls = "vbestui-checkbox"
export default {
  name: "BCheckbox",
  data(){
    return{
      prefixCls:prefixCls
    }
  },
  props: {
    label: {
      type: [Number, String, Boolean],
      default: "",
    },
    name: {
      type: String,
      default: "",
    },
    value: null,
    border: {
      type: Boolean,
      default: false,
    },
    button: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  inject: {
    checkboxGroup: {
      default: "",
    },
  },
  computed: {
    model: {
      get() {
        return this.isGroup ? this.checkboxGroup.value : this.value;
      },
      set(value) {
        this.isGroup
          ? this.checkboxGroup.$emit("input", value)
          : this.$emit("input", value);
      },
    },
    isGroup() {
      return !!this.checkboxGroup;
    },
    isCheck() {
      return this.checkboxGroup ? this.model.includes(this.label) : this.model;
    },
    isBorder() {
      return this.checkboxGroup.border || this.border;
    },
    isButton() {
      return this.checkboxGroup.button || this.button;
    },
    isDisabled() {
      return this.checkboxGroup.disabled || this.disabled;
    },
  },
  methods:{
      async handleChange(){
          await this.$nextTick();
          if(!this.isGroup)this.$emit('change',this.value)
      }
  }
};
</script>